<template>
  <div id="side-bar">
    <el-menu class="el-menu-vertical-demo" router active-text-color="#409EFF">
      <el-menu-item
        v-for="item in menu"
        :index="item.path"
        :key="item.path"
        @click="clickMenu(item)"
      >
        {{ item.label }}
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "sideBar",
  components: {},
  props: {},
  data() {
    return {
      menu: [
        {
          path: "/home",
          name: "home",
          label: "首页",
        },
        {
          path: "/RealAlarm",
          name: "RealAlarm",
          label: "实时告警",
        },
        {
          path: "/HistoryAlarm",
          name: "HistoryAlarm",
          label: "历史告警",
        },
        {
          path: "/HistoryLine",
          name: "HistoryLine",
          label: "历史曲线",
        },
        {
          path: "/ReportForm",
          name: "ReportForm",
          label: "报表",
        },
        {
          path: "/Inspection",
          name: "Inspection",
          label: "巡检",
        },
        {
          path: "/Overhaul",
          name: "Overhaul",
          label: "检修",
        },
      ],
    };
  },
  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.Children); //过滤元组
    },
    // isSelect: function () {
    //   return this.$route.name;
    // },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    clickMenu(item) {
      console.log(item);
      this.$router.push(
        //页面跳转
        {
          name: item.name,
        }
      );
    },
  },
};
</script>
<style scoped>
#side-bar {
  color: #a2bbf0;
  width: 2%;
  height: 90%;
  float: left;
  position: relative;
  left: 0;
  top: -40px;
  overflow: hidden;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 90%;
  display: flex;
  flex-direction: column;
}
li {
  cursor: pointer;
  flex: 1;
  padding: 0 3px;
  margin: 3px 0 0 2px;
  text-align: center;
  writing-mode: vertical-rl;
  background: rgb(39, 51, 80);
  /* background-color: rgba(225, 225, 225, 0.2); */
  border-radius: 5px 5px 5px 5px;
}
.el-menu-vertical-demo {
  background: transparent;
  border: none;
}

.el-menu-item {
  padding-left: 40px !important;
  color: #a2bbf0;
  font-size: 12px;
  padding: 0;
}
.el-menu-item:hover {
  background: #a2bbf0;
  color: #fff;
}
</style>
